<template>
  <div class="product-view">
    <!-- 商品详情 -->
    <van-sticky>
      <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="router.back()" />
    </van-sticky>
    <!-- 商品轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in baseStore.GoodsProduct.banner" :key="index">
        <van-image width="100%" height="333" fit="cover" position="center" :src="item" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品名称，描述，价格，喜欢 -->
    <van-row class="product-goods">
      <van-col span="20">
        <div class="product-name">{{ baseStore.GoodsProduct.goods_name }}</div>
        <div class="product-desc">{{ baseStore.GoodsProduct.lc_recommend[0] }}</div>
        <div class="product-price">¥{{ baseStore.GoodsProduct.price }}</div>
      </van-col>
      <van-col span="4">
        <div class="product-like-icon"><van-icon :name="likeIs? 'like' : 'like-o'" @click="likeIs=!likeIs" size="20" /></div>
        <div class="product-like-number">{{ baseStore.GoodsProduct.star_number }}</div>
      </van-col>
    </van-row>
    <!-- 福利 -->
    <div class="goods-pledge">
      <div><van-icon name="logistics" color="#0c79cc" />免运费 <van-icon name="completed-o" color="#0c79cc" />正品授权</div>
      <div><van-icon name="clock-o" color="#0c79cc" />现货商品3个工作日内发货</div>
    </div>
    <!-- 选择颜色尺码数量 -->
    <div class="choose-style">
      <van-row gutter="20" @click="cartBtn">
        <van-col span="2"><van-icon name="bag-o" size="20" /></van-col>
        <van-col span="20">选择颜色、尺码、数量</van-col>
        <van-col span="2"><van-icon name="arrow" size="20" /></van-col>
      </van-row>
    </div>
    <!-- 查看店铺的全部商品 -->
    <div class="store-goods">
      <van-row gutter="20">
        <van-col span="4">
          <van-image width="100%" fit="contain" src="http://imgs-qn.iliangcang.com/ware/brand/1332.jpg"
            class="store-img" />
        </van-col>
        <van-col span="18">查看Noord商品</van-col>
        <van-col span="2"><van-icon name="arrow" size="20" /></van-col>
      </van-row>
    </div>
    <!-- 商品详情和购物须知的导航栏 -->
    <van-tabs v-model:active="cutAct" style="margin: 10px 0;">
      <van-tab title="商品详情" name="0"></van-tab>
      <van-tab title="购物须知" name="1"></van-tab>
    </van-tabs>
    <!-- 商品详情和购物须知内容 -->
    <div>
      <!-- 商品详情 -->
      <div v-show="cutAct == '0'">
        <van-image width="100%" v-for="(item, index) in baseStore.GoodsProduct.product_banner" :key="index"
          :src="item" />
      </div>
      <!-- 购物须知 -->
      <div class="buyer-reading" v-show="cutAct == '1'">
        <p>— 所有商品均为正品保证。</p>
        <p>— 中国大陆地区免运费 （偏远地区、受疫情和自然灾害影响、受节假日特殊活动等影响时，需承担部分运费）。</p>
        <p>— 包邮默认商家合作快递，如指定快递请联系客服，并承担运费差额。</p>
        <p>— 蜡烛、液态品、手表等含电池产品无法空运，运输时间相较普通空运件会更久。</p>
        <p>— 如出现产品质量问题请在签收后72小时内联系客服。</p>
        <p></p>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <div>
      <van-divider :style="{borderColor: '#1989fa'}" ><van-icon name="like-o" size="20" />或许你也喜欢</van-divider>
      <div>
        <van-row :gutter="[10, 15]">
          <van-col span="12" v-for="item in baseStore.guessLikeList" :key="item.goods_id">
            <Goods :goods="item"></Goods>
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 购物车弹出框 -->
    <van-popup v-model:show="showCat" position="bottom" :style="{ height: '60%' }">
      <div class="cat-popup">
        <!-- 商品 -->
        <div class="popup-title">
          <van-image width="200" :src="baseStore.GoodsProduct.banner[0]" radius="10px" />
          <div class="popup-goods">
            <span>{{ baseStore.GoodsProduct.goods_name }}</span>
            <span>{{ baseStore.GoodsProduct.brand_name }}</span>
            <span>￥{{ baseStore.GoodsProduct.price }}</span>
          </div>
        </div>
        <!-- 颜色选择 -->
        <div class="color-title">颜色选择：</div>
        <van-row :wrap=false class="popup-color">
          <van-col span="8" v-for="item in baseStore.GoodsProduct.product_banner">
            <div class="popup-img">
              <van-image width="120" height="120" :src="item" />
            </div>
          </van-col>
        </van-row>
        <!-- 数量选择 -->
        <div class="popup-number">
          <div>数量：</div>
          <van-stepper v-model="goodsNumber" min="1" max="10" />
        </div>
        <van-button type="primary" size="large" round @click="submitCart" class="popup-submit">{{ carOrBuy
          }}</van-button>
      </div>
    </van-popup>

    <!-- 底部操作栏 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon icon="cart-o" text="购物车" :badge="userStore.CartGoods.length" to="index/cart" />
      <van-action-bar-icon icon="shop-o" text="店铺" />
      <van-action-bar-button type="warning" text="加入购物车" @click="cartBtn" :color="Color.blue" />
      <van-action-bar-button type="danger" text="立即购买" @click="buyBtn" :color="Color.darkGrey" />
    </van-action-bar>
    <van-back-top bottom="10vh"/>
  </div>


</template>

<script setup lang="ts">
// 引入
import { getCartData, getSettlementDate } from '../api';
import { useBaseStore, useUserStore } from '../store';
import { Color } from '../enum/color';
import { showToast } from 'vant';
//创建实例
const route = useRoute();
const router = useRouter();
const baseStore = useBaseStore();
const userStore = useUserStore();


// 获取购物车数据
userStore.getCartGoods();
onMounted(async () => {
  //获取详情数据
  await baseStore.getGoodsProduct(route.query.goods_id as string);
  // 获取猜你喜欢数据
  baseStore.getGuessLikeList(baseStore.GoodsProduct.goods_name.slice(0, 2));
});
//滚动条回到0
document.documentElement.scrollTop = 0;

let showCat = ref(false)
let goodsNumber = ref(1)
let carOrBuy = ref("")
let cutAct = ref("")
let likeIs = ref(false);

let cartBtn = () => {
  if(!localStorage.getItem("token")){
    router.push("/login")
    return;
  }
  showCat.value = !showCat.value
  carOrBuy.value = "加入购物车"
}
let buyBtn = () => {
  if(!localStorage.getItem("token")){
    router.push("/login");
    return;
  }
  showCat.value = !showCat.value
  carOrBuy.value = "立即购买"
}
// 加入购物车
let submitCart = async () => {
  if (carOrBuy.value == "加入购物车") {
    // 加入购物车
    let result = await getCartData({
      status: "addcart",
      userId: localStorage.getItem("token"),
      goodsId: baseStore.GoodsProduct.goods_id,
      goodsNumber: goodsNumber.value
    });
    if (result.code != 0) {
      console.log("加入购物车失败")
      return
    }
    console.log("加入购物车成功")
    showToast('加入购物车成功');
  } else {
    await getSettlementDate({
      status: "addsettlement",
      userId: localStorage.getItem("token"),
      from: "product",
      goodsId: baseStore.GoodsProduct.goods_id,
      goodsNumber: goodsNumber.value
    })
    router.push("/submitOrder");
  }

}

</script>

<style scoped lang="less">
/* 详情页的样式 */
.product-view {

  /* 详情页商品信息样式 */
  .product-goods {
    width: 92%;
    margin: 10px auto 0;

    /* 商品名称 */
    .product-name {
      color: #000;
      font-size: 20px;
      line-height: 40px;
    }

    /* 商品描述 */
    .product-desc {
      color: #333;
      font-size: 16px;
      line-height: 32px;
    }

    /* 商品价格 */
    .product-price {
      color: #0c79cc;
      font-size: 30px;
      line-height: 60px;
    }

    /* 商品喜欢图标 */
    .product-like-icon {
      text-align: center;
    }

    /* 商品喜欢数字 */
    .product-like-number {
      font-size: 16px;
      text-align: center;
    }
  }

  /* 商品福利样式 */
  .goods-pledge {
    width: 92%;
    margin: 0 auto 0;
    line-height: 30px;
    color: #666;
  }

  /* 选择样式的样式 */
  .choose-style {
    width: 92%;
    margin: 0 auto 0;

    .van-col {
      line-height: 60px;
    }
  }

  /* 店铺商品样式 */
  .store-goods {
    width: 92%;
    margin: 0 auto 0;

    .van-col {
      line-height: 60px;

      .store-img {
        vertical-align: middle
      }
    }
  }

  /*购买须知样式 */
  .buyer-reading {
    font-size: 12px;

    p {
      margin-top: 10px;
    }
  }

  .cat-popup {
    width: 95%;
    margin: 0px auto 0px;
    padding: 10px 0px;

    .popup-title {
      display: flex;
      align-items: center;

      .popup-goods {
        display: flex;
        flex-direction: column;
        margin-left: 10px;

        span {
          margin-bottom: 10px;
        }

        &>span:nth-child(1) {
          color: #000;
          font-weight: bold;
        }

        &>span:nth-child(2) {
          color: #333333;
        }

        &>span:nth-child(3) {
          color: #007AFF;
          font-weight: bold;
        }
      }
    }

    .color-title {
      color: #333;
      margin: 20px 0 10px 0;
    }

    .popup-color {
      overflow: hidden;
      overflow-x: scroll;
    }

    .popup-color::-webkit-scrollbar {
      width: 0px;
    }

    // 数量选择
    .popup-number {
      display: flex;
      justify-content: space-between;
      align-items: center;

      &>div:first-child {
        color: #333;
      }
    }

    // 提交按钮
    .popup-submit {
      margin-top: 90px;
    }
  }
}
</style>
